{% load myFilter %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加Cookie</title>
    <!-- Bootstrap 3.3.7 css 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery 1.9.1，务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 js 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .logo {
            padding: 0;
        }

        #cookie_textarea {
            width: 100%;
        }

        .table tbody tr td {
            vertical-align: middle;
        }

        td > img {
            width: 36px;
        }

        .user_info > h4 {
            padding-left: 15px;
            display: inline-block;
        }

        .user_info > img {
            width: 50px;
            border-radius: 25px;
            border: 1px solid #e7e7e7;
        }

        .panel-heading > h3 {
            display: inline-block;
            font-weight: 700;
        }

        .user_list, .task_list {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <!-- 导航栏 -->
    <div class="container">
        <!-- 导航栏左边 -->
        <div class="navbar-header">
            <a class="navbar-brand logo" href="https://www.csdn.net" target="_blank">
                <img style="height:50px" src="https://img-home.csdnimg.cn/images/20201124032511.png">
            </a>
        </div>
        <!-- 导航栏右边 -->
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" data-toggle="modal" data-target="#cookieModal">添加Cookie</a>
                </li>
                <li>
                    <a href="" data-toggle="modal" data-target="#taskModal">添加任务</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#cookie_show" data-toggle="tab">用户中心</a></li>
        <li><a href="#task_show" data-toggle="tab">任务队列</a></li>
    </ul>

    <div class="tab-content">
        <div id="cookie_show" class="tab-pane fade in active">
            <div class="container user_list">
                <div class="row">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">博客展示</h3>
                        </div>
                        <div class="panel-body">
                            <table class="table table-hover">
                                <thead>
                                <tr class="">
                                    <th>序号</th>
                                    <th>昵称</th>
                                    <th>码龄</th>
                                    <th>勋章</th>
                                    <th>上次更新</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for user in user_list %}
                                    <tr>
                                        <td><h4 class="text-muted">{{ forloop.counter }}</h4></td>
                                        <td>
                                            <a href="{{ user.profile }}" target="_blank" class="user_info">
                                                <img src="{{ user.picture }}">
                                                <h4>{{ user.nick_name }}</h4>
                                            </a>
                                        </td>
                                        <td><img
                                                src="https://g.csdnimg.cn/static/user-reg-year/1x/{{ user.years }}.png">
                                        </td>
                                        <td>

                                            {% for p in user.tags|strSplit:"|" %}
                                                <img src="https://csdnimg.cn/medal/{{ p }}">
                                            {% endfor %}

                                        </td>
                                        <td>{{ user.u_c.last_update }}</td>
                                        {% if user.u_c.status == '1' %}
                                            <td><h3><span class="glyphicon glyphicon-ok-sign"
                                                          style="color: limegreen"></span></h3></td>
                                        {% else %}
                                            <td><h3><span class="glyphicon glyphicon-remove-sign"
                                                          style="color: red"></span></h3></td>
                                        {% endif %}
                                        <td>
                                            <a class="btn btn-danger" href="#">删除</a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="task_show" class="tab-pane fade">
            <div class="container task_list">
                <div class="row">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title">任务展示</h3>
                        </div>
                        <div class="panel-body">
                            <table class="table table-hover">
                                <thead>
                                <tr class="">
                                    <th>序号</th>
                                    <th>发布者</th>
                                    <th>文章</th>
                                    <th>发布时间</th>
                                    <th>预计完成时间</th>
                                    <th>状态</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in tasks %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ item.sender }}</td>
                                        <td><a href="{{ item.article_url }}" target="_blank">{{ item.title }}</a></td>
                                        <td>{{ item.release_time }}</td>
                                        <td>{{ item.finished_time }}</td>
                                        {% if item.status == '1' %}
                                            <td><span class="label label-success">已完成</span></td>
                                        {% else %}
                                            <td><span class="label label-default">队列中</span></td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 添加Cookie模态框 -->
<div class="modal fade" id="cookieModal">
    <!-- 模态框 -->
    <div class="modal-dialog">
        <form action="/accept/" method="post">
            {% csrf_token %}
            <!-- 模态框内容 -->
            <div class="modal-content">
                <!-- 模块框头部 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="model-title">添加 Cookie</h4>
                </div>
                <!-- 模态框body -->
                <div class="modal-body">
                    <textarea name="cookie_content" id="cookie_textarea" rows="4"></textarea>
                </div>
                <!-- 模态框页脚 -->
                <div class="modal-footer">
                    <button class="btn btn-success">确认</button>
                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 添加任务模态框 -->
<div class="modal fade" id="taskModal">
    <!-- 模态框 -->
    <div class="modal-dialog">
        <form action="add_task/" method="post">
            {% csrf_token %}
            <!-- 模态框内容 -->
            <div class="modal-content">
                <!-- 模块框头部 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="model-title">添加任务</h4>
                </div>
                <form action="#" class="form-inline" role="form" method="post">
                    <!-- 模态框body -->
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">发布者:</label>
                            <input type="text" name="sender" value="{{ remote_ip }}" class="form-control"
                                   placeholder="请输入名称" readonly="readonly">
                        </div>

                        <div class="form-group">
                            <label class="control-label">文章地址:</label>
                            <label class="pull-right" style="color:red; display: none" id="article_prompt">地址有误!</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="article_url" placeholder="请输入文章地址"
                                       id="article_url" required>
                                <span class="input-group-btn">
                                    <a class="btn btn-primary" href="#" id="check_url">检&nbsp;&nbsp;&nbsp;测</a>
                                </span>
                            </div>
                        </div>

                        <input type="hidden" id="article_title" name="title" value="默认标题">

                    </div>
                    <!-- 模态框页脚 -->
                    <div class="modal-footer">
                        <button class="btn btn-success" disabled id="btn_submit">提交</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </form>
    </div>
</div>

<script>
    $('#check_url').click(function () {
        var title = $('#article_url').val();
        if (title.trim() === '') {
            alert('请输入文章链接');
            return
        } else {
            $.ajax({
                url: '/article_title?article_url=' + title,
                type: 'GET',
                data: '',
                success: function (data) {
                    article_title = data.title;
                    console.log(article_title);
                    if (article_title === null || article_title === '') {
                        show_prompt('error', '链接有误!')
                    } else {
                        show_prompt('success', '通过!');
                        $('#article_title').val(article_title)
                    }
                },
                error: function (error) {
                    show_prompt('error', '请求失败!')
                }
            })
        }
        $('#btn_submit').removeAttr("disabled");
        console.log(title);

        function show_prompt(type, msg) {
            var prompt = $('#article_prompt');
            prompt.css('display', 'unset');
            if (type === 'success') {
                prompt.css('color', 'green');
            } else {
                prompt.css('color', 'red');
            }
            prompt.text(msg)
        }
    })
</script>

</body>
</html>